<template name="home">
	<view>
		<scroll-view scroll-y class="page">
			<!--banner 图片-->
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
					 duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image class="swiper-image" :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!--搜索框-->
			<view class="input-view">
				<uni-icon type="search" size="22"></uni-icon>
				<input confirm-type="search" @confirm="seacher" @input="bindName" v-model="name" class="input" type="text" placeholder="输入搜索关键词" />
				<image v-if="name !=''" class="icon-close" src="../../static/icon_close.png" @click="cleanSeacher"></image>
			</view>

			<view class="cu-card article" v-for="item in list">
				<view class="cu-item shadow">
					<navigator hover-class="none" :url="'/pages/home/routeDetail?routeId=' + item.routeID+'&routeName='+item.routeName"
					 class="nav-li">
						<view class="bus-no">{{item.routeName}}</view>
						<view class="content">
							<view class="desc">
								<view class="station"><text class="tit">{{item.startName}} - {{item.endName}}</text></view>
								<view>
									<view class='cu-tag bg-white'>
										<view class="medium bg-green oval">首</view>
										<text class="timer margin-lr-xs">{{item.firstTime}}</text>
									</view>
									<view class='cu-tag bg-white'>
										<view class="medium bg-red oval">末</view>
										<text class="timer margin-lr-xs">{{item.lastTime}}</text>
									</view>
									<view class="cu-tag bg-white timer">票价:{{item.price}}元</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import http from '../../common/http.js';
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				swiperList: [{
					id: 1,
					type: 'image',
					url: '../../static/20190422115918.jpg',
				}, {
					id: 2,
					type: 'image',
					url: '../../static/20190422115937.jpg'
				}],
				list: [],
				index: 0,
				phValue: '搜索线路名',
				news: [],
				isdisabled: false,
				indicatorDots: true,
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500,//滑动动画时长
				name:''
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			this.initData();
		},
		methods: {
			...mapMutations(['showLoading', 'hideLoading']),
			initData: function(e) {
				//获取公交巴士列表
				let _self = this;
				_self.showLoading();
				http.get('/app/api/qrcode/index/9307', function(res) {
					_self.list = res.data;
					_self.hideLoading();
				});
			},
			openinfo(e) {
				var newsid = e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url: '../info/info?newsid=' + newsid
				});
			},
			seacher: function(e) {
				let _self = this;
				let routeName = e.detail.value;
				if (routeName.trim().length > 0) {
					_self.showLoading();
					http.get('/app/api/qrcode/index/search/9307?routeName=' + routeName, function(res) {
						_self.list = res.data;
						_self.hideLoading();
					});
				}else{
					this.name = '';
					uni.showToast({
						title: "请输入正确的关键字搜索",
						icon: "none"
					});
				}
			},
			bindName:function (e) {
				let name = e.detail.value;
				this.name = name;
			},
			cleanSeacher: function (e) {
				this.name = '';
				this.initData();
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}

	.uni-media-list-body {
		height: auto;
	}

	.swiper-image {
		height: 100%;
		width: 100%;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
	}

	.article {
		margin-top: -15px;
	}

	.uni-media-list-text-top {
		line-height: 1.6em;
	}

	.input-view {
		width: 92%;
		display: flex;
		height: 30px;
		border-radius: 5px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
	}

	.input-view .uni-icon {
		line-height: 30px !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
		border: 1px solid #FFFFFF;
	}

	.bus-no {
		font-size: 19px;
		font-weight: 600;
		color: var(--black);
		line-height: 55px;
		padding: 0 16px;
	}

	.station {
		padding: 0px 0px 5px;
		font-size: 15px;
	}

	.tit {
		font-size: 13px;
		color: #959595;
	}

	.oval {
		border-radius: 4px;
	}

	.medium {
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		width: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cu-tag {
		padding: 0px;
	}

	.timer {
		font-size: 13px;
		font-weight: 400;
	}

	.bg-green {
		background-color: #70cc5d;
	}

	.bg-red {
		background-color: #ff7f7f;
	}

	.search-input {
		height: 35px;
		line-height: 35px;
	}
	.icon-close {
		width: 17px;
		height: 17px;
		margin-top: 7px;
	}
</style>
